<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/include.jsp"%>
<head>
	<script type="text/javascript" src='<s:url value="/scripts/CustomTreeUI.js" includeParams="none"/>'></script>
	<link rel="stylesheet" type="text/css" href='<s:url value="/scripts/column-tree.css" includeParams="none"/>'/>
</head>
<body>

<script>
	Ext.onReady(function (){
		var Tree = Ext.tree;
		var loader =  new Tree.TreeLoader({
          			 dataUrl:'<s:url namespace="/role" action="grant!getChilden.action" includeParams="false"/>',
          			 baseParams:{'role.id':'<s:property value="role.id"/>'},
          			 baseAttrs:{
                         uiProvider: Ext.tree.ColumnNodeUI
                     } 
        });
		loader.on("beforeload",function(nodeloader,node){
			nodeloader.baseParams.myNodeType=node.attributes.myNodeType;
			nodeloader.baseParams.nodeId=node.attributes.id;
			return true;
		});
		
   		var tree = new Tree.ColumnTree({
        el:'tree-div',
        width: 550,
        height: 300,
        autoScroll:true,
        animate:true,
        enableDD:true,
        containerScroll: true,
        rootVisible:false,
        columns:[{
            header:'功能',
            width:330,
            dataIndex:'name',
            renderer:function(v,n,a){
            	return v;
            }
        },
        {
            header:'类型',
            width:100,
            dataIndex:'fieldClass',
            renderer:function(v,n,a){
             if (v==1){
                return "输入";
       		 }
       		 if (v == 2){
           		 return "输出";
       		 }
       		 if (v==3){
           		 return "操作";
       		 }
       	 } 
        },
        {
            header:'名称',
            width:100,
            dataIndex:'fieldDesc'
        }], 
        loader:loader
        });
    // set the root node
    var root = new Tree.AsyncTreeNode({
        text: '功能',
        draggable:false,
        id:'-1',
        myNodeType:'fun'
        
    });
    
    tree.setRootNode(root);
    tree.addListener("checkchange",oncheck);
    //tree.addListener("click",onclick);
    function oncheck(node,check){
        	if (node.leaf && node.parentNode  ){
        		node.parentNode.getUI().toggleCheck(true);
        	}
        	else if (!node.leaf){
            	var f = function(n){
            		 n.getUI().toggleCheck(check);
                };
            	node.eachChild(f);
        	}
        	
    }
    function onclick(node){
    	if (node.leaf){
       	 alert(node);
       	}
    }
    tree.render();
    root.expand(true);
    	  var tpl = new Ext.XTemplate('<tpl for=".">',
    	    	  '<input type="hidden" name="role.functions[{# - 1}].id" value="{id}" />',
    	    	  '{[values.i= (xindex-1)]}',
    	    	  '{[values.j=-1]}',
    	    	  	'<tpl for="childNodes">',
    	    	    	
						 '<tpl if="values.ui.isChecked()">',
						 	'{[parent.j = (parent.j+1)]}',
							'<input type="hidden" name="role.functions[{parent.i}].fields[{parent.j}].id" value="{id}"/>',
						  '</tpl>',
    	    	  	' </tpl>',
    	    	  '</tpl>');
  		  Ext.get("tjButton").on("click",function(){

  			var cn = [];
  	        var f = function(){
  	            if(this.attributes.checked && !this.attributes.fieldClass){
  	                cn.push(this);
  	            }
  	        }
  	       root.cascade(f);
  		   tpl.overwrite('ids',cn);
    	 });
    });
    
</script>

<div class="main">
<div class="main_title"><b>你当前的位置</b>：权限管理-分配功能</div>

<s:form  namespace="/role" action="grant">

<s:hidden name="role.id" id="role_id"/>

<div id="ids" style="display:none"></div>
<table align="center"  cellpadding="1" cellspacing="1" class="tablelist">
	<s:if test="hasErrors()">
		<s:if test="hasFieldErrors()">
			<tr align="center">
				<td class="tableHeader2"><font color="red" size="4"><s:fielderror/></font></td>
				<td class="tableHeader2"></td>
			</tr>
		</s:if>
		<s:if test="hasActionErrors">
			<tr align="center">
				<td class="tableHeader2"><font color="blue"><s:actionerror/></font></td>
				<td class="tableHeader2"></td>
			</tr>
		</s:if>	
	</s:if>
	<tr class="listr2">
		<td width="30%" align="right" class="listr6">角色名</td>
		<td align="left" class="listr5"><s:property value="role.name"/></td>
	</tr>
	<tr class="listr2">
		<td width="30%" align="right" class="listr6">角色描述</td>
		<td align="left" class="listr5"><s:property value="role.detail"/></td>
	</tr>
	<tr class="listr2">
		<td width="30%" align="right" class="listr6">功能</td>
		<td align="left" class="listr5">
		<div>
			<div id="tree-div"/>
			</div>
		</td>
	</tr>
	<tr class="listr4">    		
		<td colspan="2">
			<s:submit cssClass="btn" onmouseover="this.className='btn_hover'" onmouseout="this.className='btn'" value="提交" id="tjButton"></s:submit>
			<input name="back" type="button" class="btn" onmouseover="this.className='btn_hover'" onmouseout="this.className='btn'" value="返回" onclick="location.href='list.action'" />
		</td>
	</tr>
</table>
</s:form>
</div>
</body>